<template>
  <div>
    <ul class="month-box" @click.stop="monthClick($event)">
      <li
        v-for="item in monthObjeArr"
        :key="item.id"
        :data-month="item.value"
        :class="item.class"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { computed } from "@vue/reactivity";
//eslint-disable-next-line
const props = defineProps({
  monthList: Array,
  value: String,
  year: Number,
  min: String,
  max: String,
});
const moment = window.moment;
//eslint-disable-next-line
const emits = defineEmits(["update:value"]);
const monthClick = function (event) {
  if (!event.target.className.includes("not-month")) {
    let month = event.target.getAttribute("data-month").split("-").pop();
    emits("update:value", `${props.year}${month.padStart(2, "0")}`);
  }
};
let monthObjeArr = computed(() => {
  const result = [];
  const minMoment = moment(props.min, "YYYYMMDD");
  const maxMoment = moment(props.max, "YYYYMMDD");
  for (let index in props.monthList) {
    let value = +index + 1;
    let id = `${props.year}${value.toString().padStart(2, "0")}`;
    let classArr = [];
    if (
      +id < +minMoment.format("YYYYMM") ||
      +id > +maxMoment.format("YYYYMM")
    ) {
      classArr.push("not-month");
    } else if (id === props.value) {
      classArr.push("select");
    } else {
      classArr.push("month");
    }
    result.push({
      value,
      id: parseInt(`${props.year}${value.toString().padStart(2, "0")}`),
      text: props.monthList[index],
      class: classArr,
    });
  }
  return result;
});
</script>
<script>
export default {
  name: "monthComponent",
};
</script>
<style lang="scss" scoped>
.month-box {
  list-style: none;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
.month {
  width: 56px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.not-month {
  width: 56px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  border-radius: 4px;
  color: #898989;
}
.month:hover {
  background: #eeeeee;
}
.select {
  width: 56px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
  background: #357ebd;
}
</style>
